<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.demo{width:350px; margin:100px auto 10px auto}
</style>
<script>
$(function(){
	// Instantiate a slider
var mySlider = new Slider("#ex4", {
    min: 0, max: 100, range: true, value: [20, 80],
    reversed : false,
    orientation: "vertical"
    
});

var mySlider1 = $('#ex5').slider({
	min: 0, max: 100, range: false, value: 80,
    reversed : false,
});
//$("#ex6").slider();
$("#ex5").on("slide", function(slideEvt) {
	$("#sp1").html(slideEvt.value);
});

$("#ex4").prevAll().find(".slider-track").css("background", "-webkit-gradient(linear, left top, right bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)))");
 mySlider.on("sliderTrackClick", function(value){
			alert(value)
 })
var value = $('#ex5').val();
$("#sp1").html(value);
});
</script>
</head>
<body>
<div class="demo">
	<input id="ex4" type="text"/>
	
</div>
<div class="demo">
	<span id="sp1"></span><input id="ex5" type="text"/>
</div>
</body>
</html>